<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>讨论 - 码匠论坛</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/common/custom.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/css/index.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/css/post.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/css/fancybox.min.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/fontawesome/css/fontawesome.min.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/share/css/share.min.css}" media="all"/>
    <script th:src="@{/static/common/jquery.min.js}"></script>
    <script th:src="@{/static/layui/layui.js}"></script>
    <script th:src="@{/static/js/search.js}"></script>
    <script src="/static/plupload/plupload.full.min.js"></script>
    <script src="/static/plupload/wangEditor/wangEditor.min.js"></script>
    <script th:src="@{/static/js/fancybox.min.js}"></script>
    <script th:src="@{/static/js/qiniu.min.js}"></script>
    <script th:src="@{/static/js/forum.js}"></script>
    <script th:src="@{/static/js/emoji.js}"></script>
    <script th:src="@{/static/share/js/social-share.min.js}"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <header th:replace="common/header"></header>
    <!-- 左侧 -->
    <div class="layui-col-xs8"
         style="padding-left: 2%;padding-right: 2%;border-right: 1px solid #e6e6e6;">
        <!-- 标题 -->
        <div class="question-title">
            <span id="question-title-info" th:text="${question.title}"></span>
        </div>

        <!-- 帖子元数据 -->
        <span class="metadata">
            <span id="questionDing" th:if="${question.isDing} eq 1" style="color:red;">[置顶]</span>
            <span id="questionJing" th:if="${question.isJing} eq 1" style="color:red;">[精品]</span>
                发帖用户：<a th:href="@{'/user/'+${question.uid}}"><span th:text="${question.publisher}"></span></a>&nbsp;|&nbsp;
                浏览量： <span th:text="${question.viewCount}"></span>&nbsp;|&nbsp;
                评论数： <span th:text="${question.commentCount}"></span>&nbsp;|&nbsp;
                收藏数： <span th:text="${question.likeCount}"></span>&nbsp;|&nbsp;
                发布于：<span th:text="${question.gmtCreate}"></span>&nbsp;|&nbsp;
                最后修改于：<span th:text="${question.gmtModified}"></span>
            <span class="userEdit" id="delete">删除</span>
            <span class="userEdit" id="edit">编辑</span>
        </span>
        <hr/>

        <!-- 编辑区内容，默认是关闭的 -->
        <div class="layui-row" id="questionInfo" style="display:none;">
            <div class="layui-col-md11">
                <form style="margin-top: 2%;" class="layui-form" lay-filter="question-info-form" >
                    <!-- 问题标题-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题：</label>
                        <div class="layui-input-block">
                            <input style="background-color: #e6e6e67a;" readonly="readonly" type="text" name="ques-title" id="ques-title" class="layui-input">
                        </div>
                    </div>

                    <!--富文本编辑器-->
                    <label class="layui-form-label">内容：</label>
                    <div style="margin-left: 110px" id="editor" class="text"></div>

                    <!-- 添加标签 -->
                    <div style="height: 10px"></div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">标签</label>
                        <div class="layui-input-block">
                            <input type="text" name="ques-tag" id="ques-tag" lay-verify="tag" autocomplete="off"
                                   placeholder="请输入标签名称，用英文逗号分隔"
                                   class="layui-input">
                        </div>
                    </div>
                    <!-- 数据库标签选择 -->
                    <div class="layui-tab" id="forum-tags"></div>
                </form>
            </div>
        </div>

        <!-- 帖子主体内容 -->
        <div class="question-body">
            <p th:utext="${question.description}"></p>
        </div>
        <div class="question-body-index">
            <a class="collect-question" href="javascript:;">
                <i style="font-size: 15px" class="layui-icon layui-icon-star">&nbsp;收藏</i>
            </a>&nbsp;&nbsp;
            <a class="report-question" href="javascript:;">
                <i style="font-size: 15px" class="layui-icon layui-icon-vercode">&nbsp;举报</i>
            </a>
        </div>
        <hr/>
        <!-- 此处渲染文章标签 -->
        <div id="post-tags"></div>
        <!--分享-->
<!--        <div data-weibo-title="分享到微博" data-qq-title="分享到QQ" data-douban-title="分享到豆瓣" class="-->
<!--         share-component" data-disabled="twitter,facebook" data-description="Share.js - 一键分享到微博，QQ空间，腾讯微博，人人，豆瓣">觉得还不错？一键分享到：</div>-->
        <!-- 评论区 -->
        <h2><span th:text="${question.commentCount} + '&nbsp;个评论'"></span></h2>
        <hr/>
        <!-- 评论显示区 -->
        <div class="comments" id="comments"></div>
        <!-- 提交评论区 -->
        <div id="commentQuestion">
            <div id="login-comment-body" style="display: none">
                <div class="comment-body">
                    <!-- 回复者头像 -->
                    <li class="comment-publisher" style="list-style: none;">
                        <img class="img-rounded" id="comment-publisher-avatar" style="border-radius: 50%" width="40" th:src="${question.avatar}">
                        <small style="font-size: 21px;color: #303030;margin-left: 10px;" th:text="${session.username}"></small>
                    </li>
                    <!-- 回复区 -->
                    <div>
                    <textarea id="comment-description" name="comment" placeholder="快来评论吧"
                              style="display: none;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-top: 10px">
                    <div class="layui-input-block">
                        <button type="submit" style="float: right;border-radius: 10px" class="layui-btn layui-btn-normal"
                                lay-submit=""
                                onclick="comment()"
                                lay-filter="publish">提交评论
                        </button>
                    </div>
                </div>
            </div>
            <!-- 未登录 -->
            <div id="unlogin-comment-body" style="text-align: center;display: none">
                评论帖子请先&nbsp;<a href="/login">登录</a>&nbsp;或&nbsp;<a href="/register">注册</a>&nbsp;
            </div>
        </div>
    </div>
    <!-- 右侧 -->
    <div class="layui-col-xs4">
        <!-- 发起人 -->
        <div class="publisher">
            <div class="publisher-name">
                <h3>发帖用户</h3>
            </div>
            <div class="publisher-body">
                <dl>
                    <dt class="pull-left aw-border-radius-5">
                        <img id="publishAvatar" class="" th:src="${question.avatar}" src="" width="50" height="50" style="border-radius: 50%">
                    </dt>
                    <dd class="pull-left">
                        <a class="aw-user-name publish-name" th:href="@{'/user/'+${question.uid}}" th:text="${question.publisher}"></a>
                        <span class="focus-links"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;关注</span>
                        <span class="job-title" th:utext="${question.jobTitle}"></span>
                        <div style="width: 370px">
                            <span id="rate" title="用户等级头衔" class=""></span>
                            <div id="question-userinfo" th:utext="${question.userInfo}"></div>
                        </div>
                    </dd>
                </dl>
            </div>
        </div>
        <hr style="width: 95%;margin-left: 20px" class="layui-bg-gray">
        <!-- 推荐内容 -->
        <div>
            <div class="publisher-name">
                <h3>精品帖子</h3>
            </div>
            <ol class="recommendQuestions"></ol>
        </div>
        <hr class="layui-bg-gray" style="width: 95%;margin-left: 20px">
        <!-- 相关问题 -->
        <div>
            <div class="publisher-name">
                <h3>相关帖子</h3>
            </div>
            <ol class="relatedQuestions"></ol>
        </div>
    </div>
<!--    <footer th:replace="common/footer"></footer>-->
</div>
<script th:inline="javascript">
    let layedit, edit;
    let question = [[${question}]];

    let localToken =localStorage.getItem("token");
    // let loginUserInfo = [[${session.loginUserInfo}]];

    //初始化信息
    // init(loginUserInfo);
    let loginUserInfo=init(localToken);

    layui.use(['element', 'carousel', 'layedit', 'jquery','form','flow'], function () {
        let element = layui.element;
        let form = layui.form;
        layedit = layui.layedit;
        let flow = layui.flow;
        let $ = layui.jquery;

        //配置图片上传
        layedit.set({
            uploadImage: {
                url: '/uploadImage' //接口url
                , type: '' //默认post
            }
        });

        //评论区域的富文本编辑器
        edit = layedit.build('comment-description', {
            tool: ['left', 'center', 'italic', 'underline', 'del', 'right', '|','face','image', 'link', 'unlink']
        });

        //选中导航栏，并且使用面包屑导航
        $('.layui-header li').click(function () {
            $(this).addClass('layui-this').siblings().removeClass('layui-this');
        });

        //面包屑使用
        let currPoisition = "<span lay-separator=\"\">&gt;</span><a><cite>"+ question.title +"</cite></a>";
        $(".layui-breadcrumb a").last().after(currPoisition);

        let score = question.rateScore;
        $("#rate").html("<i class=\"fa fa-trophy\" aria-hidden=\"true\"></i>&nbsp;" + question.rate);
        if(score < 5){
            $("#rate").attr("class","layui-badge layui-bg-gray");
        }else if(score >= 5 && score < 15){
            $("#rate").attr("class","layui-badge layui-bg-blue");
        }else if(score >= 15 && score < 50){
            $("#rate").attr("class","layui-badge layui-bg-cyan");
        }else if(score >= 50 && score < 200){
            $("#rate").attr("class","layui-badge layui-bg-green");
        }else if(score >= 200 && score < 500){
            $("#rate").attr("class","layui-badge layui-bg-orange");
        }else{
            $("#rate").attr("class","layui-badge");
        }

        //编辑操作，此处显示编辑窗，并将编辑内容回显到页面上
        $("#edit").click(function () {
            //获取question信息并回显到表单上
            let ques = [[${question}]];
            $("#ques-title").attr("value",ques.title);
            $("#ques-tag").attr("value",ques.tag);

            let E = window.wangEditor;
            let editor = new E('#editor');
            layer.open({
                type:1,
                title:"编辑",
                area: ['70%','60%'],
                btn: ["修改","取消"],
                content:$("#questionInfo").html(),
                success: function(layero, index){

                    //显示富文本编辑器
                    editor.customConfig.debug = true;
                    editor.customConfig.customAlert = function (info) {
                        alert('上传图片助手：' + info)
                    };

                    editor.customConfig.uploadImgServer = '/uploadQuestionImages';  // 上传图片到服务器
                    editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024;
                    editor.customConfig.uploadImgMaxLength = 5;
                    editor.customConfig.uploadFileName = 'ques';
                    editor.customConfig.uploadImgHooks = {
                        fail: function (xhr, editor, result) {
                            // 图片上传并返回结果，但图片插入错误时触发
                            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                            layer.msg("图片插入失败");
                        },
                        error: function (xhr, editor) {
                            // 图片上传出错时触发
                            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                            layer.msg("图片上传失败");
                        },
                        timeout: function (xhr, editor) {
                            // 图片上传超时时触发
                            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                            layer.msg("图片上传超时");
                        },
                    };

                    //配置表情包
                    initEmoji(editor);
                    editor.create();

                    //回显富文本编辑器中的信息
                    editor.txt.html(ques.description);
                },
                yes: function(index, layero){
                    //点击确定修改按钮后的回调操作
                    //index-当前层索引，layero-当前层dom对象

                    let quesionId = ques.id;
                    let tag = layero.find('input')[1].value;
                    let description = editor.txt.html();

                    let temp = description;

                    //校验内容信息
                    if(temp.replace(/<.*?>/g,"") === null || temp.replace(/<.*?>/g,"") === ""){
                        layer.alert("内容不能为空!", {icon: 2, time: 1500});
                        return;
                    }

                    //校验标签信息
                    if(tag === null || tag === ""){
                        layer.alert("标签不能为空!", {icon: 2, time: 1500});
                        return;
                    }

                    let regex = "^[a-z0-9A-Z\u4e00-\u9fa5]+$";
                    if(tag.indexOf(",") != -1){
                        let tags = tag.split(",");
                        for(let i = 0 ; i < tags.length; i++){
                            if(!tags[i].match(regex)){
                                layer.alert("标签中只能包含汉字、字母和数字，并用英文逗号分隔!", {icon: 2, time: 1500});
                                return;
                            }
                        }
                    }else{
                        if(!tag.match(regex)){
                            layer.alert("标签中只能包含汉字、字母和数字，并用英文逗号分隔!", {icon: 2, time: 1500});
                            return;
                        }
                    }

                    $.ajax({
                        type: "post",
                        url: "/editQuestionInfo",
                        data: {
                            id: quesionId,
                            description: description,
                            tag: tag
                        },
                        success: function (res) {
                            if (res.status === 200) {
                                layer.alert("更新问题信息成功!", {icon: 6, time: 2000});
                                layer.close(index); //如果设定了yes回调，需进行手工关闭
                                window.location.href="/question/" + ques.id;
                            }else if(res.status === 400){
                                layer.alert(res.msg, {icon: 2, time: 2000});
                            }else{
                                layer.alert("系统错误，请稍后再试!", {icon: 3, time: 2000});
                            }
                        }
                    })
                }
            });
        });

        //删除操作
        $("#delete").click(function (){
            layer.confirm('确定删除该问题？', {icon: 3, title:'提示'}, function(index){
                layer.msg("暂不支持该操作，程序猿小哥哥正在紧急开发中哦~");
                layer.close(index);
            });
        });

        let username = null;
        if($.trim(loginUserInfo).length > 0){
            username = loginUserInfo.username;
        }
        //流式加载页面评论区
        flow.load({
            elem: '#comments',
            isAuto: false,
            end: '<div style="font-size: 16px;color: #999;margin-bottom: 50px">没有更多评论了</div>',
            done: function(page, next){
                let lis = [""];
                $.get('/getCommentsByQuestionId?questionId='+ question.id +'&page='+ page, function(res){
                    if(res.status === 200){
                        if(res.data === null){
                            lis.push("<div style='font-size: 17px;text-align: center;font-weight: 300;margin: 20px 0;color: #999'>暂无评论，快来做第一个评论的人吧~</div>");
                            $(".layui-flow-more").hide();
                        }else{
                            let comments = res.data;
                            //需要单独对每个评论进行处理
                            layui.each(comments, function(index, item){
                                //查询评论总数
                                let replyNum = 0;
                                $.ajax({
                                    type: "get",
                                    url: "/getReplyNum",
                                    async: false,
                                    data: {parentCommentId: item.cid},
                                    success: function (res) {
                                        replyNum = res.data; //获取评论总数
                                    }
                                });

                                //查询每条评论的点赞信息
                                let likeNum = 0;
                                $.ajax({
                                    type: "get",
                                    url: "/getLikeCount",
                                    async: false,
                                    data: {commentId: item.cid},
                                    success: function (res) {
                                        likeNum = res.data;
                                    }
                                });

                                if(item.info === null || item.info === ""){
                                    item.info = "&nbsp;&nbsp;";
                                }

                                //评论用户等级头衔
                                let score = item.rateScore;
                                let cla = "";
                                if(score < 5){
                                    cla = "layui-badge layui-bg-gray";
                                }else if(score >= 5 && score < 15){
                                    cla = "layui-badge layui-bg-blue";
                                }else if(score >= 15 && score < 50){
                                    cla = "layui-badge layui-bg-cyan";
                                }else if(score >= 50 && score < 200){
                                    cla = "layui-badge layui-bg-green";
                                }else if(score >= 200 && score < 500){
                                    cla = "layui-badge layui-bg-orange";
                                }else{
                                    cla = "layui-badge";
                                }

                                let html = "         <div class='comment-list'>\n" +
                                    "                <div class='comment-header'>\n" +
                                    "                    <ul class='index-list'>\n" +
                                    "                        <li>\n" +
                                    "                            <a class='comment-avatar' href='/user/" + item.uid + "' target='_blank'>\n" +
                                    "                                <img style='border-radius: 10px' width='45' height='45' src='" + item.avatar + "'>\n" +
                                    "                            </a>\n" +
                                    "                            <a class='comment-index-name' href='/user/" + item.uid + "' target='_blank'>" + item.uname + "</a>\n" +
                                    "                            <span style='border-radius: 3px;float:left;margin-right: 10px;margin-top: 3px' class='"+ cla +"'><i class=\"fa fa-trophy\" aria-hidden=\"true\"></i>&nbsp;"+ item.rate +"</span><p style='margin-top: 4px'>" + item.info + "</p>\n" +
                                    "                        </li>\n" +
                                    "                    </ul>\n" +
                                    "                </div>\n" +
                                    "                <div class='comment-description'>\n" +
                                    "                    " + item.comment + "\n" +
                                    "                </div>\n" +
                                    "                <div class='clearfix' style='margin-left: 56px;margin-bottom: 38px;'>\n" +
                                    "                    <span class='text-color-999 pull-right'>" + item.time + "</span>\n" +
                                    "                    <span class='operate' data-id='" + item.cid + "' comment-uname='" + item.uname + "'>\n" +
                                    "                       <a class='agree'>\n" +
                                    "                           <i data-placement='right' style='vertical-align: -5px' class='layui-icon layui-icon-praise' data-original-title='赞同回复'></i>\n" +
                                    "                               <span class='count' style='font-size: 10px;vertical-align: -2px;'>" + likeNum + "</span>\n" +
                                    "                       </a>\n" +
                                    "                    </span>\n" +
                                    "                    <span class='sub-comment'>\n" +
                                    "                    <a class='add-sub-comment' data-click='" + (index + 1) + "' href='javascript:;'>" +
                                    "                        <i class='layui-icon layui-icon-dialogue'></i>&nbsp;<span style='font-size: 11px;    vertical-align: 2px;'>" + replyNum + "</span>\n" +
                                    "                    </a></span>\n" +
                                    "                </div>";

                                replyNum = 0;
                                //查询这层楼有没有楼中楼回复，并拼接html
                                let replyHtml = addReplyComment(item.cid, index + 1, item.uname);

                                lis.push(html + replyHtml);
                            });
                        }
                    }
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < res.pages);


                    //此处添加按钮操作
                    //点击评论框下的回复框弹出/收起回复内容
                    $(".add-sub-comment").click(function () {
                        let num = $(this).attr("data-click");
                        $("#box-data-click-" + num).toggle();

                        if ($("#box-data-click-" + num).css("display") !== "none") {
                            //如果不为none的话，就展示背景颜色
                            $("#box-data-click-" + num).siblings(".clearfix").children(".sub-comment").css("background-color", "#499ef3");
                            $("#box-data-click-" + num).siblings(".clearfix").children(".sub-comment").children("a").children("i").css("color", "#fff");
                            $("#box-data-click-" + num).siblings(".clearfix").children(".sub-comment").children("a").children("span").css("color", "#fff");
                        } else {
                            $("#box-data-click-" + num).siblings(".clearfix").children(".sub-comment").css("background-color", "#f5f5f5");
                            $("#box-data-click-" + num).siblings(".clearfix").children(".sub-comment").children("a").children("i").css("color", "#155faa");
                            $("#box-data-click-" + num).siblings(".clearfix").children(".sub-comment").children("a").children("span").css("color", "#155faa");
                        }
                    });

                    //遍历查询评论框
                    $(".sub-comment").each(function () {
                        let me = $(this);
                        let count = me.children(".add-sub-comment").children("span").html();
                        //找到类名为 "selected" 的所有 div 的子元素，并将其设置为蓝色：
                        //html() 方法设置或返回被选元素的内容（innerHTML）
                        let c = parseInt(count);//获取 span的html内容 有回复和没回复的背景颜色不同
                        if (c === 0) {
                            me.css("background-color", "#f5f5f5");
                        } else {
                            me.css("background-color", "#499ef3");
                            me.children("a").children("i").css("color", "#fff");
                            me.children("a").children("span").css("color", "#fff");
                        }
                    });

                    //点击评论框出现回复按钮
                    $(".sub-comment-input-text").focus(function () {
                        //获取当前点击的ID
                        $(this).siblings(".sub-comment-input-submit").show();
                    });
                    //siblings() 方法返回被选元素的所有同级元素。 this 返回this 的同级元素 后面的Filter 返回过滤 只要这个类名的元素

                    //点击取消收起按钮
                    $(".sub-comment-button-cancel").click(function () {
                        //清空对应文本框中的内容
                        $(this).parent(".sub-comment-input-submit").siblings(".sub-comment-input-text").val("");
                        $(this).parent().hide();
                    });

                    //点击绿色回复框，将要回复的目标用户名以@形式放入指定输入框，并将目标回复对象放入属性中
                    $(".sub-comment-btn").click(function () {
                        let num = $(this).attr("data-click-num");
                        let ans = "#box-data-input-" + num;
                        let replyUsername = $(this).parent().children("a").children("span").html();
                        let replyFor = " @" + replyUsername + "：";
                        $("#box-data-submit-" + num).attr("reply-user", replyUsername);
                        $(ans).val(replyFor);
                    });

                    //先遍历查询点赞状态
                    if($.trim(username).length > 0){
                        $(".operate").each(function () {
                            let me = $(this);
                            let commentId = $(this).attr("data-id");
                            let commentUsername = $(this).attr("comment-uname");
                            $.ajax({
                                type: "get",
                                url: "/getLikeStatus",
                                data: {
                                    username: username,
                                    commentId: commentId,
                                    commentUsername: commentUsername,
                                    questionId: question.id
                                },
                                success: function (res) {
                                    if (res.status === 200) {
                                        if (res.data === 1) {
                                            //是已赞状态，改变css
                                            me.css("background-color", "#499ef3");
                                            me.children("a").children("i").css("color", "#fff");
                                            me.children("a").children("span").css("color", "#fff");
                                        } else {
                                            me.css("background-color", "#f5f5f5");
                                        }
                                    } else {
                                        me.css("background-color", "#f5f5f5");
                                    }
                                }
                            });
                        });
                    }

                    //点赞评论
                    $(".operate").click(function () {
                        let me = $(this);
                        let commentId = $(this).attr("data-id");
                        let commentUsername = $(this).attr("comment-uname");
                        if(username === undefined || username === null || $.trim(username).length < 1){
                            layer.msg("请先登录后再点赞哦");
                            return false;
                        }
                        if (username === commentUsername) {
                            layer.msg("您不能给自己点赞哦");
                            return false;
                        }
                        $.ajax({
                            type: "get",
                            url: "/like",
                            async: false,
                            data: {
                                username: username,
                                commentId: commentId,
                                commentUsername: commentUsername,
                                questionId: qId
                            },
                            success: function (res) {
                                if (res.status === 200) {
                                    //点赞成功
                                    if (res.data === 1) {
                                        //修改数值
                                        let count = me.children("a").children("span").html();
                                        let c = parseInt(count) + 1;
                                        me.children("a").children("span").html(c);
                                        me.css("background-color", "#499ef3");
                                        me.children("a").children("i").css("color", "#fff");
                                        me.children("a").children("span").css("color", "#fff");
                                    } else {
                                        let count = me.children("a").children("span").html();
                                        me.children("a").children("span").html(count - 1);
                                        me.css("background-color", "#f5f5f5");
                                        me.children("a").children("i").css("color", "#155faa");
                                        me.children("a").children("span").css("color", "#155faa");
                                    }
                                }
                            }
                        })
                    });

                    //新增评论中楼中楼回复
                    $(".sub-comment-button-comment").click(function () {
                        let qId = [[${question.id}]];
                        let temp = $(this).attr("id").split("-");
                        //获取指定输入框中的内容
                        let ans = "#box-data-input-" + temp[temp.length - 1];
                        let content = $(ans).val();

                        //获取父级评论ID
                        let replyId = $(this).attr("reply-id");
                        let rId = parseInt(replyId);

                        //获取回复对象用户名
                        let replyUsername = $(this).attr("reply-user");

                        //数据校验
                        if ($.trim(username).length === 0) {
                            layer.alert("用户未登录", {icon: 5, time: 1500});
                        }

                        if (($.trim(content).length === 0)) {
                            layer.alert("回复内容不能为空哦", {icon: 5, time: 1500});
                        }

                        $.ajax({
                            type: "post",
                            url: "/reply",
                            data: {
                                questionId: qId,
                                username: username,
                                content: content,
                                parentCommentId: rId,
                                replyfor: replyUsername
                            },
                            success: function (res) {
                                if (res.status === 200) {
                                    parent.location.reload();
                                }
                            },
                            error: function () {
                                layer.alert("回复失败，请稍后再试", {icon: 5, time: 2000});
                            }
                        });
                    });


                });
            }
        });
    });

    //页面加载完成就开始
    $(document).ready(function () {
        //导航栏停留在首页
        $("#index").addClass("layui-this");

        let username = null;
        if(loginUserInfo !== undefined && loginUserInfo !== null){
            username = loginUserInfo.username;
        }

        //判断当用户与问题发布者一致时，可以使用编辑和删除操作按钮
        if(question.publisher === username){
            $(".userEdit").show();
        }

        //图片的fancybox显示，寻找问题体中的图片
        let img = $(".question-body").find("img");
        if(img.length !== 0){
            for(let i = 0; i < img.length; i++){
                let href = img[i].src;
                let html1 = "<a data-fancybox='gallery' href='"+ href +"'>";
                let html2 = "</a>";
                let temp = $(img[i])[0].outerHTML;
                $(img[i]).replaceWith($(html1 + temp + html2));
            }
        }

        if (username !== null && ($.trim(username).length > 0)) {
            //显示评论区
            $("#login-comment-body").show();
            $("#unlogin-comment-body").hide();
            $(".question-body-index").show();
        } else {
            //不显示评论区
            $("#unlogin-comment-body").show();
            $("#login-comment-body").hide();
            $(".question-body-index").hide();
        }

        //收藏按钮的显示
        let qId = question.id;
        if(username != null && $.trim(username).length > 0){
            $.ajax({
                type: "get",
                url: "/getCollectionStatus",
                async: false,
                data: {
                    username: username,
                    questionId: question.id
                },
                success: function (res) {
                    if (res.status === 200) {
                        if (res.data === 1) {
                            $(".collect-question").children("i").attr("class", "layui-icon layui-icon-star-fill");
                            $(".collect-question").children("i").html("&nbsp;已收藏");
                        }
                    }
                }
            });
        }

        //收藏按钮操作
        $(".collect-question").click(function () {
            //查询数据库中收藏的状态
            let qId = [[${question.id}]];
            $.ajax({
                type: "get",
                url: "/collect",
                data: {
                    username: username,
                    questionId: qId
                },
                success: function (res) {
                    if (res.status === 200) {
                        if (res.data === 1) {
                            $(".collect-question").children("i").attr("class", "layui-icon layui-icon-star-fill");
                            $(".collect-question").children("i").html("&nbsp;已收藏");
                        } else if (res.data === 0) {
                            $(".collect-question").children("i").attr("class", "layui-icon layui-icon-star");
                            $(".collect-question").children("i").html("&nbsp;收藏");
                        }
                    }
                }
            });

        });

        //举报按钮
        $(".report-question").click(function () {
            layer.open({
                title: '请输入举报理由（反动、色情、政治言论等）',
                area: ['500px', '260px'],
                closeBtn:'1',
                content: `<div><textarea name="txt_remark" placeholder="请在此处输入举报理由" id="reason" style="width:450px;height:130px;padding: 4px 5px;"></textarea></div>`,
                btn:['确认','取消'],
                yes: function (index, layero) {
                    let reason = $('#reason').val();//获取多行文本框的值
                    if(reason == null || reason.replace(/\s/g, "").length === 0){
                        layer.msg("举报理由不能为空哦");
                    }else{
                        $.ajax({
                            type: "post",
                            url: "/userReport",
                            async: false,
                            data: {
                                username: username,
                                rUsername: questionInfo.publisher,
                                rQuestionId: questionInfo.id,
                                reportReason: reason
                            },
                            success: function (res) {
                                if(res.status === 200){
                                    layer.msg("举报成功，我们后续会尽快通知您处理结果!");
                                }else{
                                    layer.msg(res.msg);
                                }
                            }
                        });
                        layer.close(index);
                    }
                }
            });
        });

        //获取文章标签
        $.ajax({
            type: "get",
            url: "/getQuestionTags",
            async: false,
            data: {questionId: qId},
            success: function (res) {
                let html = "";
                if (res.status === 200) {
                    if (res.data == null) {
                        //拼接空串
                        $("#post-tags").html(html);
                    } else {
                        //拆分，拼接
                        let tags = res.data.split(",");
                        $.each(tags, function (i, tag) {
                            html += "<div class=\"post-tag\">\n" +
                                       "<div><a class=\"tagname\" href=\"/tag?tagname="+ tag +"\"><span><i class=\"layui-icon layui-icon-note\">&nbsp;" + tag + "</i></span></a></div>\n" +
                                    "</div>";
                        });
                        $("#post-tags").html(html);
                    }
                }
            }
        });

        //查询推荐问题
        $.ajax({
            type: "get",
            async: false,
            url: "/getJingQuestions",
            success: function (res) {
                if (res.status === 200) {
                    let html = "";
                    if (res.data == null) {
                        html += "暂无精品问题";
                    } else {
                        let recommendQuestionArray = res.data;
                        $.each(recommendQuestionArray, function (i, item) {
                            html += "<li style='margin: 10px 0;'><a href=\"/question/" + item.id + "\">" + item.title + "</a></li>";
                        });
                    }
                    $(".recommendQuestions").html(html);
                }
            }
        });

        //查询相关问题
        $.ajax({
            type: "get",
            url: "/getRelatedQuestions",
            data: {questionId: qId},
            async: false,
            success: function (res) {
                if (res.status === 200) {
                    let html = "";
                    if (res.data == null) {
                        html += "<div style='font-size: 16px;color: #999'>还没有相关问题推荐呢o(￣┰￣*)ゞ</div>";
                    } else {
                        let questionArray = res.data;
                        for (let i = 0; i < questionArray.length; i++) {
                            html += "<li><a href=\"/question/" + questionArray[i].id + "\">" + questionArray[i].title + "</a></li>";
                        }
                    }

                    $(".relatedQuestions").html(html);
                }
            }
        });

        //关注按钮显示
        let followName = question.publisher;
        let status = 0;
        if(username != null && $.trim(username).length > 0){
            $.ajax({
                type: "get",
                url: "/getFollowStatus",
                async: false,
                data: {
                    userName: followName,   //被关注的用户名
                    followName: username   //点击关注者的用户名
                },
                success: function (res) {
                    if (res.status === 200) {
                        if (res.data === 0) {
                            //显示未关注信息
                            status = 0;
                            $(".focus-links").css("background-color", "#42c02e");
                            $(".focus-links").html("<i class=\"fa fa-plus\" aria-hidden=\"true\"></i>&nbsp;关注");
                        } else {
                            //显示已关注信息
                            status = 1;
                            $(".focus-links").css("background-color", "#a9b5ac");
                            $(".focus-links").html("已关注");
                        }
                    }
                }
            });
        }

        //关注按钮
        $(".focus-links").click(function () {
            if(username === undefined || username === null || $.trim(username).length < 1){
                layer.msg("请先登录后再关注该用户哦",function () {

                });
                return false;

            }
            if (followName === username) {
                layer.msg("您不能关注自己哦~", function () {

                });
                return false;
            }
            $.ajax({
                type: "get",
                url: "/follow",
                async: false,
                data: {
                    userName: followName,   //被关注的用户名
                    followName: username   //点击关注者的用户名
                },
                success: function (res) {
                    if (res.status === 200) {
                        if (res.data === 0) {
                            //取消关注
                            $(".focus-links").css("background-color", "#42c02e");
                            $(".focus-links").html("关注");
                        } else {
                            //关注后
                            $(".focus-links").css("background-color", "#a9b5ac");
                            $(".focus-links").html("已关注");
                        }
                    }
                }
            })
        })
    });

    //添加评论
    function comment() {
        let username = [[${session.username}]];
        if (($.trim(username).length === 0)) {
            layer.msg("请先去登录后再来评论哦");
            return false;
        }

        $.ajax({
            type: "post",
            url: "/comment",
            data: {
                username: username,
                comment: layedit.getContent(edit),
                questionId: question.id
            },
            success: function (res) {
                if (res.status === 200) {
                    parent.location.reload();  //当前位置父dom元素重加载
                } else {
                    layer.alert(res.msg, {icon: 5, time: 2000});
                }
            },
            error: function () {
                layer.alert("系统错误，请稍后再试", {icon: 5, time: 2000});
            }
        });
    }

    //查询楼中楼回复
    function addReplyComment(parentCommentId, index, commentUsername) {
        let html = "";
        $.ajax({
            type: "get",
            url: "/queryReply",
            async: false,
            data: {"parentCommentId": parentCommentId},
            success: function (res) {
                if (res.status === 200) {
                    //增加html
                    let replys = res.data;
                    html += "<div class='sub-comment-box' id='box-data-click-" + index + "'><div class='sub-comment-list'><ul>";

                    for (let i = 0; i < replys.length; i++) {
                        //拼接html
                        html += "  <li style='margin-bottom: 20px'>\n" +
                            "          <a class='comment-avatar' href='/user/" + replys[i].ruid + "'>\n" +
                            "              <img style='border-radius: 10px' width='40' height='40' src='" + replys[i].ravatar + "'>\n" +
                            "          </a>\n" +
                            "          <div class='comment-index-name'>\n" +
                            "              <a href='/user/" + replys[i].ruid + "'><span>" + replys[i].rname + "</span>  • </a>" +
                            "                    <span style='font-size: 13px'>" + replys[i].rtime + "</span>\n" +
                            "                    <span data-click-num='" + index + "' class='sub-comment-btn'>回复</span>\n" +
                            "           </div>\n" +
                            "           <p class='sub-comment-description' style='font-size: 13px;color: #666'>" + replys[i].rcontent + "</p>\n" +
                            "       </li>";
                    }

                    //多个楼中楼回复后添加末尾
                    html += "      <div class='sub-comment-input' style='margin-top: 30px;'>\n" +
                        "               <textarea id='box-data-input-" + index + "' class='sub-comment-input-text' placeholder=' 评论一下...'\n" +
                        "                                  style='width: 100%;height:50px;border-radius: 5px;margin-bottom: 20px;'></textarea>\n" +
                        "                   <div class='sub-comment-input-submit' style='margin-top:-10px;margin-bottom: 20px;display: none'>\n" +
                        "                       <span reply-id='" + parentCommentId + "' reply-user='" + commentUsername + "' id='box-data-submit-" + index + "' class='sub-comment-button-comment'>回复</span>\n" +
                        "                       <span class='sub-comment-button-cancel'>取消</span>\n" +
                        "                   </div>\n" +
                        "           </div></div></div>" +
                        "           <hr>\n" +
                        "        </div>";
                } else if (res.status === 500) {
                    //没有回复的时候，新增一个html
                    html += "    <div class='sub-comment-box' style='display: none' id='box-data-click-" + index + "'>\n" +
                        "                <div class='sub-comment-list'>\n" +
                        "                    <div style='text-align: center;color: #666;margin-top: 10px'>暂无评论</div>\n" +
                        "                    <!-- 楼中楼回复框 -->\n" +
                        "                    <div class='sub-comment-input' style='margin-top: 30px;'>\n" +
                        "            <textarea id='box-data-input-" + index + "' class='sub-comment-input-text' placeholder=' 评论一下...'\n" +
                        "                      style='width: 100%;height:50px;border-radius: 5px;'></textarea>\n" +
                        "                        <div class='sub-comment-input-submit' style='margin-top:10px;margin-bottom: 20px;display: none'>\n" +
                        "                            <span reply-id='" + parentCommentId + "' reply-user='" + commentUsername + "' id='box-data-submit-" + index + "' class='sub-comment-button-comment'>回复</span>\n" +
                        "                            <span class='sub-comment-button-cancel'>取消</a>\n" +
                        "                        </div>\n" +
                        "                    </div>\n" +
                        "                </div>\n" +
                        "            </div>" +
                        "            <hr>\n" +
                        "        </div>";
                }
            },
            error: function () {
                layer.alert("回复失败，请稍后再试", {icon: 5, time: 2000});
            }
        });
        return html;
    }

    //鼠标放置发帖用户头像的旋转动画
    $("#publishAvatar").hover(function () {
        $("#publishAvatar").attr("class","layui-anim layui-anim-rotate layui-anim-loop");
    },function () {
        $("#publishAvatar").attr("class","");
    })

</script>
</body>
</html>